<template>
    <div class="login-register">{{ isLogin ? 'LOGIN' : 'REGISTER' }}</div>
    <div class="pl-login-wrap">
        <div class="left-img">
            <img :src="youngWomen" alt="">
        </div>
        <div class="right-input">
            <div class="counter">
                <input type="text" placeholder="输入你的账号" id="input-counter">
            </div>
            <div class="password">
                <input placeholder="输入你的密码" type="password" autocomplete="new-password">
            </div>
            <div class="login-register-btn">{{ isLogin ? '登录' : '注册' }}</div>
            <div class="other-login" v-show="isLogin">
                <div class="weixin" @click="weiXinLogin">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixin"></use>
                    </svg>
                    <span>微信登录 </span>
                </div>
            </div>
        </div>
        <div class="qrcode" v-if="showQrcode.weixin">
            <img :src="qrcodeUrl" alt="">
        </div>
        <div class="register">
            <span>{{ isLogin ? '还没有账号？' : '已经有账号 ' }}</span>
            <span @click="toRegister">{{ !isLogin ? '登录' : '注册' }}</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import youngWomen from '@/assets/img/business-3d-young-women-standing.png'
import { ref } from 'vue'
import QRCode from 'qrcode'
import { login, getUserInfo } from '../../api';
import { userInfoStore } from '../../store';

const initUserInfoStore = userInfoStore()
const qrcodeUrl = ref('')
const isLogin = ref(true)
const qrCode = ref<any>({})
const info = ref({})
const showQrcode = ref({
    weixin: false
})

const $emit = defineEmits(['closeDialog'])
const toRegister = async () => {
    isLogin.value = !isLogin.value
    showQrcode.value.weixin = false
}

/* 轮询获取用户信息 */
const checkUserInfo = () => {
    const timer = setInterval(async () => {
        const res = await getUserInfo(qrCode.value.tempUserId)
        if (res.length) {

            info.value = res[0]

            localStorage.setItem('userInfo', JSON.stringify(info.value))
            initUserInfoStore.setUserInfo(info.value)
            
            $emit('closeDialog')
            
            clearInterval(timer)
        }
    }, 2000)
}

const weiXinLogin = async () => {
    showQrcode.value.weixin = !showQrcode.value.weixin
    const res = await login()
    qrCode.value = res
    QRCode.toDataURL(qrCode.value.qrCodeReturnUrl)
        .then(url => {
            qrcodeUrl.value = url
            checkUserInfo()
        })
        .catch(err => {
            console.error(err)
        })
}
</script>

<style scoped lang="less">
.login-register {
    font-size: 36px;
    font-weight: bold;
    color: gray;
    margin-left: 50px;
    margin-bottom: 10px;
}

.pl-login-wrap {
    // border: 1px solid red;
    height: 480px;
    display: flex;
    justify-content: space-around;
    position: relative;

    .left-img {
        // border: 1px solid green;
        width: 360px;
        height: 480px;
        overflow: hidden;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .right-input {
        padding-top: 50px;

        .counter {
            height: 46px;
            width: 360px;

            // border: 1px solid green;
            input {
                width: 100%;
                height: 100%;
            }
        }

        .password {
            margin: 25px 0;
            height: 40px;
            width: 360px;

            // border: 1px solid red;
            input {
                width: 100%;
                height: 100%;
            }
        }

        .login-register-btn {
            // margin-top: 10px;
            width: 372px;
            background: rgb(9, 238, 63);
            height: 46px;
            text-align: center;
            line-height: 46px;
            border-radius: 3px;
            color: aliceblue;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
        }

        .other-login {
            margin-top: 36px;

            .weixin {
                // border: 1px solid red;
                cursor: pointer;
                height: 36px;
                display: flex;
                align-items: center;

                svg {
                    width: 46px;
                    width: 46px;
                }

                span {
                    margin-left: 10px;
                }
            }
        }
    }

    .qrcode {
        position: absolute;
        width: 275px;
        height: 274px;
        // border: 1px solid red;
        img{
            width: 100%;
            height: 100%;
        }
    }

    .register {
        position: absolute;
        right: 86px;
        bottom: 36px;

        span:last-child {
            font-size: 36px;
            cursor: pointer;
        }
    }
}
</style>